import { Table, Image, Button } from 'antd';
import type { ColumnsType, TableProps } from 'antd/es/table';
import React, { ReactNode, useEffect, Fragment, useState } from 'react';
import * as api from "@/api/product"
import "./index.css"

import { PlusOutlined, DeleteOutlined, EyeOutlined, EditOutlined } from '@ant-design/icons';
import AddPicture from '@/components/AddPicture';

// 引入自定义icon图标
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3608375_vocgxavju0e.js'// 在 iconfont.cn 上生成
})

interface DataType {
  key: React.Key;
  category_id: string;
  categoryName: string;
  creator: string;
  imageUrl: string;
  createTime: string
  updator: string;
  action: ReactNode;
  chinese: number;
  math: number;
  english: number;
}
const { Column } = Table;

const columns: ColumnsType<DataType> = [
  {
    title: 'ID',
    dataIndex: '_id',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: '排序',
    dataIndex: 'chinese',
    sorter: {
      compare: (a, b) => a.chinese - b.chinese,
      multiple: 3,
    },
  },
  {
    title: '图片',
    dataIndex: 'image',
  },
  {
    title: '链接地址',
    dataIndex: 'categoryImgurl',
  },
  {
    title: '加入时间',
    dataIndex: 'updateTime',
    sorter: {
      compare: (a, b) => a.math - b.math,
      multiple: 2,
    },
  },
  {
    title: '状态',
    dataIndex: 'english',
    sorter: {
      compare: (a, b) => a.english - b.english,
      multiple: 1,
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
  },
];
const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra);
};

const CarsouelManagerment: React.FC = () => {
  //设置加载动画
  let [loading, setLoading] = useState<boolean>(false)
  const [product, setProduct] = useState()

  //控制dialog显示 隐藏
  let [visible, setVisible] = useState(false)

  //控制modal显示隐藏
  let [show, setShow] = useState(false)

  // 模态框 确定按钮
  let handleOk = (instance: any) => {
    // console.log(instance)
    //调用表单提交的方法
    instance.current.submit()
    setVisible(false)
  }
  // 模态框 取消按钮
  let handleCancel = () => {
    setVisible(false)
  }

  //点击添加商品按钮处理函数
  let handleAdd = () => {
    setVisible(true)
  }

  // 获取轮播图数据
  let getPicture = () => {
    setLoading(true)
    api.getProductgetCategory()
      .then(res => {
        console.log(res.data.data);
        res.data.data.forEach((item: any) => {
          item.image = <Image src={item.categoryImgurl} width={30} height={20} />
          item.key = item._id
          item.action = <Fragment>
            <Button style={{width:'28'}}>禁用</Button>
            <Button icon={<MyIcon type="icon-bianjishuru" />}>编辑</Button>
            <Button onClick={() => {
              //弹出确认框
              setShow(true)
              //设置currentRow数据
              // setCurrentRow(r)
            }} danger icon={<DeleteOutlined onClick={() => {
              //弹出确认框
              setShow(true)
              //设置currentRow数据
              // setCurrentRow(r)
            }} />}></Button>
          </Fragment>
        })
        setProduct(res.data.data)
        setLoading(false)
      })
    // data = product
  }

  useEffect(() => {
    getPicture()
  }, [])

  return (
    <div className='carsouel'>
      <div className="action">
        <Button className="add" type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
          添加广告
        </Button>
        <Button className="del" type="primary" icon={<DeleteOutlined />}>
          批量删除
        </Button>
      </div>
      <Table columns={columns} dataSource={product} onChange={onChange} loading={loading} bordered />

      <AddPicture visible={visible} onOk={handleOk} onCancel={handleCancel} />
    </div>
  );
};

export default CarsouelManagerment;